<script setup lang="ts" xmlns="http://www.w3.org/1999/html">
import {reactive,ref} from "vue";
import activityFirst from '@/api/activity/activityFirst'
import {Message} from "@arco-design/web-vue";
import tool from "@/utils/tool";

const formRef = ref()
const form = ref({product_id:[]})
const form2 = ref({money:0  })

const rowData=ref({
  'receive_num':0,
  'picked_up_not':0,
  'zbt_store':0,
  'zbt_price':0,
  'product_price':0,
  'product_amount_price':0
})
const formVisite=ref(false)
//ref 定义字符串，整型
//reactive 数组，对象
// 初始化数据
const initData=async ()=>{

  const response=await activityFirst.getInitData();
  if(response.success){
    form.value.product_id=response.data.product_id;
    formVisite.value=true;
    form2.value.money=tool.toFixed(response.data.money, 2, 10000);
    rowData.value.receive_num=response.data.receive_num;
    rowData.value.picked_up_not=response.data.picked_up_not;
    rowData.value.zbt_store=response.data.zbt_store;
    rowData.value.zbt_price=response.data.zbt_price;
    rowData.value.product_price=response.data.product_price;
    rowData.value.product_amount_price=response.data.product_amount_price;
  }else{
    Message.error(response.message)
  }

}
initData();

const columns = reactive([
  {
    title: "选择产品",
    dataIndex: "product_id",
    width:280,
    formType: "product-select",
    editDisplay: false,
    hide:true
  }
]);


const columns2 = reactive([
  {
    title: '首充奖励金币',
    dataIndex: 'money',
    formType:'input-number',
    labelWidth: '120px',
    precision: 2,
    rules: [{ required: true, message: '配置首充奖励金币' }]
  },
]);

const submit = async (data) => {
   console.log(data)
   const response=await activityFirst.saveProduct(data);
   if(response.success){
     Message.success(response.message)
     initData();
   }else{
     Message.error(response.message)
   }
}
const submit2 =async (data) => {
  const response=await activityFirst.saveMoney(data);
  if(response.success){
    Message.success(response.message)
  }else{
    Message.error(response.message)
  }
}
</script>

<template>
  <div class="ma-content-block ">
    <a-row class="grid-demo" style="margin-bottom: 16px;">
      <a-col :flex="6">
        <div> <ma-form
            v-if="formVisite"
            ref="formRef"
            v-model="form"
            :columns="columns"
            class="mt-7"
            @submit="submit"
        ></ma-form></div>
      </a-col>
      <a-col :flex="6">
        <div>
        </div>
      </a-col>
    </a-row>
    <a-descriptions :column="4" size="large" bordered  class="lg:w-12/12 w-full">
      <a-descriptions-item label="平台实时领取">{{rowData.receive_num}}</a-descriptions-item>
      <a-descriptions-item label="背包未提货">{{rowData.picked_up_not}}</a-descriptions-item>
      <a-descriptions-item label="ZBT在售实时件数">{{rowData.zbt_store}}</a-descriptions-item>
      <a-descriptions-item label="ZBT价">{{rowData.zbt_price}}</a-descriptions-item>
      <a-descriptions-item label="平台价">{{rowData.product_price}}</a-descriptions-item>
      <a-descriptions-item label="平台原价">{{rowData.product_amount_price}}</a-descriptions-item>
      <a-descriptions-item label="操作"><a-button @click="initData()">刷新信息</a-button></a-descriptions-item>
    </a-descriptions>
    <a-row class="grid-demo" style="margin-bottom: 16px;">
      <a-col :flex="6">
        <div> <ma-form
            ref="formRef"
            v-model="form2"
            :columns="columns2"
            class="mt-7"
            @submit="submit2"
        ></ma-form></div>
      </a-col>
      <a-col :flex="6">
        <div>
        </div>
      </a-col>
    </a-row>




  </div>
</template>

<style scoped>
.grid-demo .arco-col {

  line-height: 48px;
  color: var(--color-white);
  text-align: center;
}
</style>